<template>
  <div :class="['heart', { 'heart-active': isLike }]" :style="`width:${size}px;height:${size}px`" @click="switchStatus">
    <dw-heart class="i-heart" :size="size" />
    <dw-heart class="i-heart" :size="size" />
  </div>
</template>

<script>
import dwHeart from "@/components/icon/heart/dwHeart";
export default {
  props: ["size"],
  components: {
    dwHeart,
  },
  data() {
    return {
      isLike: false,
    };
  },

  methods: {
    switchStatus() {
      this.isLike = !this.isLike;
      this.$emit("change", this.isLike);
    },
  },
};
</script>

<style lang="less" scoped>
.heart {
  display: inline-block;
  position: relative;
  color: #95a5a6;
  .i-heart {
    position: absolute;
    transition-duration: 0.5s;
  }
}
.heart.heart-active {
  color: #eb4d4b;
  .i-heart {
    transform: scale(3);
    opacity: 0;
    &:last-child {
      transform: scale(1);
      opacity: 1;
    }
  }
}
</style>
